<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '/@/store/modules/settings'

defineOptions({
  name: 'Operation',
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

const optionLegendData = reactive<any>([
  {
    value: '5155KVA',
    name: '园区总功率',
  },
  {
    value: '666KW',
    name: '光伏发电',
  },
  {
    value: '123KW',
    name: '充电桩',
  },
])
const option = reactive<any>({
  tooltip: {
    trigger: 'axis',
  },
  color: ['#02f6fe', '#28ff40', '#fa6432'],
  legend: {
    // // show: true,
    icon: 'rect',
    top: 0,
    data: [
      {
        name: '园区总功率',
        icon: 'rect',
        // itemStyle: {
        //   color: '#02f6fe',
        // },
      },
      {
        name: '光伏发电',
        icon: 'circle',
        // itemStyle: {
        //   color: '#28ff40',
        // },
      },
      {
        name: '充电桩',
        icon: 'diamond',
        // itemStyle: {
        //   color: '#fa6432',
        // },
      },
    ],
    formatter (name: any) {
      let text: string = ''
      for (const element of optionLegendData) {
        if (name == element.name) text = name + element.value
      }
      return text
    },
  },
  grid: {
    top: '10%',
    left: '6%',
    right: '6%',
    bottom: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
    axisTick: {
      alignWithLabel: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.4,
      },
    },
  },

  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.4,
        },
      },
    },
    {
      type: 'value',
      name: '',
      min: 0,
      max: 800,
      interval: 200,
    },
  ],

  series: [
    {
      name: '园区总功率',
      type: 'line',
      smooth: false,
      areaStyle: {
        opacity: '0.2',
      },
      showSymbol: false,
      data: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
    },
    {
      name: '光伏发电',
      type: 'line',
      smooth: false,
      areaStyle: {
        opacity: '0.2',
      },
      showSymbol: false,
      data: [52, 546, 156, 15, 96, 48, 234, 189, 268, 421, 536, 178, 335],
    },
    {
      name: '充电桩',
      type: 'line',
      smooth: false,
      areaStyle: {
        opacity: '0.2',
      },
      showSymbol: false,
      data: [234, 64, 12, 235, 358, 124, 196, 387, 125, 23, 56, 196, 257],
    },
  ],
})
const optionTwo = reactive<any>({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    top: '10%',
    left: '6%',
    right: '6%',
    bottom: '5%',
    containLabel: true,
  },
  legend: {
    top: 0,
    data: ['总用电量', '公用电量', '试验电量', '办公电量', '光伏发电量'],
    icon: 'rect',

    // formatter: function (e: any) {
    //   let text = [
    //     { value: 79.5, name: '电网供电' },
    //     { value: 20.5, name: '储能放电' },
    //   ]
    //   if (e == '电网供电') {
    //     return e + ': ' + 79.5
    //   } else {
    //     return e + ': ' + 20.5
    //   }
    // },
  },
  xAxis: {
    type: 'category',
    data: ['4-01', '4-02', '4-03', '4-04', '4-05', '4-06', '4-07', '4-08', '4-09', '4-10', '4-11', '4-12', '4-13', '4-14', '4-15'],
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.4,
      },
    },
    interval: 5,
  },
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.4,
        },
      },
    },
    {
      type: 'value',
      name: '',
      min: 0,
      max: 25,
      interval: 5,
    },
  ],
  // toolbox: {
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  series: [
    {
      name: '总用电量',
      type: 'line',
      itemStyle: {
        borderRadius: 8,
      },
      color: '#08ffff',
      emphasis: {
        focus: 'series',
      },
      smooth: false,
      showSymbol: false,
      data: [150, 232, 201, 154, 190, 330, 410, 562, 148, 596, 235, 351, 24, 63, 96, 658, 123, 563, 586, 472, 563],
    },
    {
      name: '公用电量',
      type: 'bar',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#8f6cfa',
      },
      stack: '公用',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '试验电量',
      type: 'bar',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#ffe762',
      },
      stack: '公用',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: '办公电量',
      type: 'bar',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#f15f23',
      },
      stack: '公用',
      label: {
        show: true,
      },
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: '光伏发电量',
      type: 'bar',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#37fd48',
      },
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
    },
    {
      name: '光伏发电量',
      type: 'line',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: '#37fd48',
      },
      smooth: false,
      showSymbol: false,
      tooltip: { show: false },
      barWidth: 50,
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
    },
  ],
})

// watch(
//   theme.value,
//   () => {
//     option.series.itemStyle.color = new graphic.LinearGradient(0, 0, 1, 0, [
//       { offset: 0, color: lightenColor(theme.value.color, 50) },
//       { offset: 1, color: theme.value.color },
//     ])
//   },
//   { immediate: true }
// )

const cardInfo = reactive<any>([
  {
    title: '光伏系统',
    en: 'PV Power System',
    icon: 'sun-cloudy-line',
    data: [
      {
        name: '发电功率',
        en: 'Real-time PV Power',
        value: '24',
        unit: 'KW',
      },
      {
        name: '今日发电量',
        en: 'Todays Total Generation',
        value: '115',
        unit: 'KWh',
      },
      {
        name: '累计发电量',
        en: 'Total Power Generation',
        value: '260',
        unit: 'MWh',
      },
    ],
  },
  {
    title: '台区用电',
    en: 'District Power',
    icon: 'dashboard-3-line',
    data: [
      {
        name: '用电功率',
        en: 'Real-time PV Power',
        value: '24',
        unit: 'KW',
      },
      {
        name: '今日用电量',
        en: 'Todays Total Power',
        value: '115',
        unit: 'KWh',
      },
      {
        name: '充电桩功率',
        en: 'Charging Station Power',
        value: '260',
        unit: 'KW',
      },
    ],
  },
  {
    title: '运行评估',
    en: 'Operational Evaluation',
    icon: 'pie-chart-line',
    data: [
      {
        name: '光伏累计收益',
        en: 'Real-time PV Power',
        value: '24',
        unit: '万元',
      },
      {
        name: '减排累计收入',
        en: 'Todays Total Power',
        value: '115',
        unit: 'Tco2',
      },
      {
        name: '绿电量占比',
        en: 'Charging Station Power',
        value: '260',
        unit: '%',
      },
    ],
  },
])

const chooseIndex = ref<any>(false)
</script>

<template>
  <div class="operation-container no-background-container">
    <!-- <div class="operation-tittle">运维总览</div> -->
    <div class="page-top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in cardInfo" :key="index" :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card>
            <div class="card-top">
              <div class="title-with-icon">
                <vab-icon class="card-icon" :icon="item.icon" />
                <span>{{ item.title }}</span>
              </div>
              <div>{{ item.en }}</div>
            </div>
            <div class="card-middle">
              <div v-for="(it, idx) in item.data" :key="idx" class="middle-row">
                <div class="middle-left">
                  <div>{{ it.name }}</div>
                  <div>{{ it.en }}</div>
                </div>
                <div class="middle-right">
                  <span>{{ it.value }}</span>
                  <span>{{ it.unit }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-card>
            <div class="echarts-titel">光伏发电、储能充放电、充电桩功率曲线(kW)</div>
            <div class="echarts-content">
              <div style="width: 100%; height: 370px">
                <vab-chart :option="option" />
              </div>
              <div class="text">
                <span style="color: #02f6fe">园区总功率</span>
                \
                <span style="color: #28ff40">光伏发电</span>
                \
                <span style="color: #fa6432">充电桩</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-card style="margin-bottom: 0px">
            <div class="echarts-titel">光伏发电、总用电量曲线(kW)</div>
            <div class="echarts-content">
              <div style="width: 100%; height: 360px">
                <vab-chart :option="optionTwo" />
              </div>
              <div class="text">
                <span style="color: #08ffff">用电总量</span>
                \
                <span style="color: #f15f23">办公用电</span>
                \
                <span style="color: #37fd48">光伏发电量</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.operation-container {
  height: 100%;
  :deep() {
    .el-card {
      overflow: hidden;
      background-color: #fff;
      background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
        transform: translateY(-5px);
      }

      .el-card__header {
        position: relative;

        > div > span {
          display: flex;
          align-items: center;

          i {
            margin-right: 3px;
          }
        }
      }

      .el-card__body {
        position: relative;
        padding: 20px;

        .card-footer-tag {
          position: absolute;
          right: var(--el-margin);
          bottom: 15px;
        }
      }
    }
  }
  .operation-tittle {
    width: 100%;
    height: 60px;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #000;
    background-color: #fff;
  }
  .page-top {
    min-height: 420px;
    .card-top {
      position: relative;
      padding-bottom: 15px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px dashed #ebeef5;

      .title-with-icon {
        display: flex;
        gap: 8px;
        align-items: center;

        .card-icon {
          width: 40px;
          height: 40px;
          padding: 8px;
          font-size: 24px;
          color: #0ab389;
          background-color: rgba(10, 179, 137, 0.1);
          border-radius: 8px;
        }
      }

      div:first-child {
        color: #303133;
      }

      div:last-child {
        margin-top: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #909399;
      }
    }
    .card-middle {
      padding: 0 5px;
    }
    .middle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      padding-bottom: 10px;
      margin-top: 16px;
      border-bottom: 1px solid #f2f5fa;
      transition: all 0.3s ease;

      &:hover {
        border-bottom-color: #d4e6e0;
        transform: translateX(5px);
      }

      .middle-left {
        font-size: 16px;

        div:first-child {
          font-weight: 500;
          color: #303133;
        }

        div:last-child {
          margin-top: 4px;
          font-size: 12px;
          color: #909399;
        }
      }
      .middle-right {
        position: relative;
        display: flex;
        align-items: baseline;

        &::before {
          position: absolute;
          top: 50%;
          left: -15px;
          width: 3px;
          height: 70%;
          content: '';
          background-color: #0ab389;
          border-radius: 3px;
          opacity: 0;
          transform: translateY(-50%);
          transition: all 0.3s ease;
        }

        span:nth-child(1) {
          font-size: 26px;
          font-weight: bold;
          color: #0ab389;
          transition: all 0.3s ease;
        }
        span:nth-child(2) {
          margin-left: 6px;
          font-size: 14px;
          color: #909399;
        }
      }

      &:hover .middle-right::before {
        left: -10px;
        opacity: 1;
      }
    }
    .echarts-titel {
      position: relative;
      width: 100%;
      max-width: 400px;
      height: 40px;
      padding-left: 20px;
      font-size: 18px;
      // background: linear-gradient(to bottom right, #21ba94, #cef0e7);
      // background-color: #cef0e7;

      &::before {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 5px;
        height: 20px;
        content: '';
        background-color: #0ab389;
        border-radius: 0 5px 5px 0;
      }
    }
    .echarts-content {
      position: relative;
      display: flex;
      width: 100%;
      overflow-x: hidden;

      div[style*='width: 98%'] {
        width: 100% !important;
        max-width: 100%;
      }

      .text {
        position: absolute;
        top: 40px;
        right: 2%;
        z-index: 99;
        writing-mode: vertical-lr;
      }
    }
  }
}
</style>
